<template>
	<view class="content">
		<view class="card">
			<button plain class="info-row icon-row flexr align-center"
				open-type="chooseAvatar" @chooseavatar="onchooseavatar">
				<text class="label flex-1">
					头像
				</text>
				<image class="user-icon" :src="userIcon"></image>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</button>
			<view class="divider"></view>
			<view class="info-row flexr align-center">
				<text class="label">
					账号
				</text>
				<text class="value flex-1">
					{{ userStore.userInfo.mobile }}
				</text>
			</view>
			<view class="divider"></view>
			<view class="info-row flexr align-center" @click="showNickDialog">
				<text class="label">
					昵称
				</text>
				<text class="value flex-1">
					{{ userStore.userInfo.customerName }}
				</text>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</view>
		</view>
		
		<view class="card">
			<view class="info-row flexr align-center">
				<text class="label">
					会员等级
				</text>
				<text class="value flex-1">
					{{ userStore.userInfo.vipLevel }}
				</text>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</view>
		</view>
		
		<view class="card">
			<view class="info-row flexr align-center" @click="showDatePicker">
				<text class="label">
					生日
				</text>
				<text class="value flex-1">
					{{ birthday }}
				</text>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</view>
			<view class="divider"></view>
			<view class="info-row flexr align-center" @click="showSexPicker">
				<text class="label">
					性别
				</text>
				<text class="value flex-1">
					{{ userStore.userInfo.sex }}
				</text>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</view>
		</view>

		<view class="flex-1"></view>
		<view class="primary-button" @click="onLogout">
			退出登录
		</view>
		
		<uni-popup ref="nickRef"
			type="center" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<inputDialog
				title="修改昵称"
				placeholder="请输入昵称"
				:val="userStore.userInfo.customerName"
				@onCancel="onCancelChangeNick"
				@onConfirm="onConfirmChangeNick"
			></inputDialog>
		</uni-popup>
		
		<uni-popup ref="datePickerRef"
			@change="({show}) => datePickerShow = show"
			type="bottom" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<myDatePicker
				:show="datePickerShow"
				:years="years"
				:months="months"
				:days="days"
				:val="dateVal"
				@onCancel="onCancelDatePicker"
				@onConfirm="onConfirmDatePicker"
			></myDatePicker>
		</uni-popup>
		
		<uni-popup ref="sexPickerRef"
			type="bottom" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<sexPicker
				@onCancel="onCancelSexPicker"
				@onConfirm="onConfirmSexPicker"
			></sexPicker>
		</uni-popup>
	</view>
</template>

<script setup>
import { readFileBase64 } from '@/tools/tools';
import { ref, computed, watch } from 'vue';
import inputDialog from '@/subpages/widgets/inputDialog.vue';
import myDatePicker from '@/subpages/widgets/myDatePicker.vue';
import sexPicker from '@/subpages/my/sexPicker.vue';
import { useUserStore } from '@/store/user';
import applogo from '@/static/applogo.png';
import { BuildImageUrl } from '@/api/api';
import { onLaunch, onShow, onHide, onLoad } from '@dcloudio/uni-app';
const userStore = useUserStore();
const birthday = computed(() => userStore.userInfo.birthday?.substr(0, 10));
const nickRef = ref(null)
const datePickerRef = ref(null)
const datePickerShow = ref(false);
const sexPickerRef = ref(null);
function getAvaliableYMD() {
	const date = new Date();
	const years = [];
	const year = date.getFullYear();
	const months = [];
	const month = date.getMonth() + 1;
	const days = [];
	const day = date.getDate();
	for (let i = 1900; i <= year; i++) {
		years.push(i + '');
	}
	for (let i = 1; i <= 12; i++) {
		months.push(i < 10 ? '0' + i : i + '');
	}
	for (let i = 1; i <= 31; i++) {
		days.push(i < 10 ? '0' + i : i + '');
	}
	return { years, months, days};
}
const initData = getAvaliableYMD();
const years = ref(initData.years);
const months = ref(initData.months);
const days = ref(initData.days);
const dateVal = ref([initData.years.length - 1, initData.months.length - 1, initData.days.length - 1]);
onShow(() => {
	if (!birthday.value) return;
	const [y, m ,d] = birthday.value.split('-');
	dateVal.value = [initData.years.indexOf(y), initData.months.indexOf(m), initData.days.indexOf(d)];
});
watch(() => birthday.value, (val) => {
	if (!val) return;
	const [y, m ,d] = val.split('-');
	dateVal.value = [initData.years.indexOf(y), initData.months.indexOf(m), initData.days.indexOf(d)];
});
const userIcon = computed(() => {
	// userStore.userInfo.headPortrait || applogo
	if (userStore.userInfo.headPortrait) {
		return BuildImageUrl(userStore.userInfo.headPortrait);
	}
	return applogo;
});
async function onchooseavatar(e) {
	const { avatarUrl } = e.detail
	// console.log("onchooseavatar", avatarUrl)
	const { data } = await readFileBase64(avatarUrl)
	const base64 = `data:image/jpeg;base64,${data}`
	// console.log("base64", base64)
	userStore.updateHeadPortrait(base64);
}
function showNickDialog() {
	nickRef.value?.open()
}
function onCancelChangeNick() {
	console.log('onCancelChangeNick')
	nickRef.value?.close()
}
function onConfirmChangeNick(name) {
	nickRef.value?.close()
	userStore.updateCustomerName(name);
}
function showDatePicker() {
	datePickerRef.value?.open()
}
function onCancelDatePicker() {
	datePickerRef.value?.close()
}
function onConfirmDatePicker(date) {
	datePickerRef.value?.close()
	// console.log(date)
	userStore.updateCustomerBirthday(date);
}
function showSexPicker() {
	sexPickerRef.value?.open()
}
function onCancelSexPicker() {
	sexPickerRef.value?.close()
}
function onConfirmSexPicker(sex) {
	sexPickerRef.value?.close()
	userStore.updateCustomerSex(sex);
}
function onLogout() {
	console.log('onLogout')
	userStore.logout();
}
</script>

<style lang="scss">
.content {
	padding-top: 32rpx;
	padding-left: 32rpx;
	padding-right: 32rpx;
	.card {
		background-color: white;
		border-radius: 12rpx;
		.info-row {
			padding: 0 32rpx;
			height: 96rpx;
			font-size: 28rpx;
			&.icon-row {
				height: 140rpx;
				border: none;
				text-align: left;
			}
			.label {
				color: $text-color1;
			}
			.value {
				color: $text-color5;
				text-align: right;
			}
			.user-icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 48rpx;
			}
			.arrow-right {
				width: 15rpx;
				height: 24rpx;
				margin-left: 12rpx;
			}
		}
	}
	.card + .card {
		margin-top: 24rpx;
	}
}
</style>
